<template>
  <div style="background: #fff; padding: 30px">
    <div class="Title">站点分级管理</div>
    <div class="flewbtn">
      <el-select
        v-model="state.value"
        placeholder="展具类型"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :popper-append-to-body="false"
        />
      </el-select>
      <el-select
        v-model="state.valueTwo"
        placeholder="展具级别"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.optionsTwo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button size="large" type="primary" @click="checkSitelist"
        >查询</el-button
      >
      <!-- <el-button size="large" @click="clearSiteItem">清除</el-button> -->
      <el-button size="large" @click="addSiteItem">增加</el-button>
    </div>
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <el-table
        :data="filterTableData"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f2f3f5',
          height: '50px',
          color: '#000000',
          'font-size': '15px',
        }"
        :cell-style="{ 'text-align': 'center', height: '80px' }"
        style="width: 100%"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="路线名称" prop="flowTitle" />
        <el-table-column label="路线logo" prop="logoImg">
          <template v-slot="scope">
            <el-image
              preview-teleported="true"
              :preview-src-list="scope.row.srcList"
              style="
                width: 120px;
                height: 100px;
                border-radius: 10px;
                margin-top: 6px;
              "
              :src="scope.row.logoImg"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="工作流设置" prop="model">
          <template v-slot="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ scope.row.model[0]
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in scope.row.model"
                    :key="index"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column label="站点数量" prop="siteNum" />
        <el-table-column label="状态" prop="lineStatus" />
        <!-- 用户权限显示开始 -->
        <el-table-column prop="powerEditing">
           <template #header>
            <div>管理权限</div>
           </template>
           <template #default="scope">
            <el-button
              size="small"
              @click="handlePowerEdit(scope.$index, scope.row)"
              type="primary"
              text
              >权限编辑</el-button
            >
           </template>
        </el-table-column>

        <!-- 结束 -->
        <el-table-column align="right">
          <!-- <template #header>
		        <el-input v-model="search" size="small" placeholder="Type to search" />
		      </template> -->
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              text
              >编辑</el-button
            >
            <!-- <el-button
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              type="primary"
              text
              >删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- 分页显示 -->
    <!-- <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      background
      :page-sizes="[5, 10]"
      :small="small"
      :disabled="disabled"
      layout="total, prev, pager, next, sizes"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="display: flex; justify-content: flex-end"
    /> -->

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="state.showModel"
      title="编辑项目"
      width="900px"
      align-center
      style="font-weight: 600"
    >
      <el-scrollbar>
      <!-- <el-scrollbar height="600px"> -->
        <!-- <div style="display: flex; margin-bottom: 15px">
          <div class="line_a">路线级别</div>
          <el-select v-model="state.modelVal" class="elSelect" size="small">
            <el-option
              v-for="item in state.mouldArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div> -->
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div class="line_g">路线名称</div>
          <el-input
            v-model="state.inputVal"
            maxlength="20"
            size="small"
            style="flex: 8"
            class="enterpriseName"
          />
        </div>
        <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
          <div class="line_b">工作流选择</div>
          <div class="line_f">
            <el-checkbox-group
              v-model="state.siteVest"
              fill="#409eff"
              @change="getworkLineItem"
            >
              <el-checkbox
                v-for="(item, index) in state.workLineList"
                :key="index"
                :label="item"
                name="siteVest"
              />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-top: 25px; margin-bottom: 25px">
          <div class="line_c">
            <div>路线</div>
            <div>LOGO</div>
          </div>
          <div>
            <el-upload
              v-model:file-list="state.uploadImgList"
              :http-request="selfUploadPic"
              action="upUrl"
              list-type="picture-card"
              :limit="1"
              show-file-list
              :on-exceed="handleExceed"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="state.dialogVisible">
              <!-- <img w-full :src="state.dialogImageUrl" alt="Preview Image"/> -->
              <el-image :src="state.dialogImageUrl" :fit="contain" />
            </el-dialog>
            <div style="font-size: 10px; color: #b8b8b8; margin-top: 10px">
              {{ state.picTip }}
            </div>
          </div>
        </div>
        <div style="display: flex; margin-top: 15px; margin-bottom: 25px">
          <div style="margin: 10px 18px 10px 16px; font-weight: 600">
            路线状态
          </div>
          <el-radio-group
            fill="#409eff"
            v-model="state.radioState"
            size="small"
          >
            <el-radio-button label="启用" />
            <el-radio-button label="停用" />
          </el-radio-group>
        </div>
        <div class="dialog-footer">
          <el-button size="small" @click="closeModel"> 取消 </el-button>
          <el-button type="primary" size="small" @click="submitFrom">
            确认
          </el-button>
        </div>
      </el-scrollbar>
    </el-dialog>
    <!-- 权限编辑对话框 -->
    <el-dialog
      v-model="state.showPowerModel"
      title="权限编辑"
      width="500px"
      align-center
      style="font-weight: 600"
    >
    <!-- <el-scrollbar height="600px"> -->
    <el-scrollbar>
    <!-- 所有账号权限->管理权限->普通权限->审核权限->客户权限 开始 -->
        <div style="display: flex; margin-bottom: 8px;">
          <div class="line_g_a">普通权限</div>
          <div class="siteAll_h6">
            <el-checkbox-group
              v-model="state.ordinarytype"
              fill="#409eff"
              @change="getordinaryName"
            >
              <el-checkbox
                v-for="(item, index) in state.usersName"
                :key="index"
                :label="item"
                name="ordinarytype"
              />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-bottom: 8px;">
          <div class="line_g_a">项目简介审核</div>
          <div class="siteAll_h6">
            <el-checkbox-group
              v-model="state.managetype"
              fill="#409eff"
              @change="getmanageName"
            >
              <el-checkbox
                v-for="(item, index) in state.usersName"
                :key="index"
                :label="item"
                name="managetype"
              />
            </el-checkbox-group>
          </div>
        </div>
       <div style="display: flex; margin-bottom: 8px;">
          <div class="line_g_a">工作流审核</div>
          <div class="siteAll_h6">
            <el-checkbox-group
              v-model="state.auditingtype"
              fill="#409eff"
              @change="getAuditingName"
            >
              <el-checkbox
                v-for="(item, index) in state.usersName"
                :key="index"
                :label="item"
                name="auditingtype"
              />
            </el-checkbox-group>
          </div>
        </div>

       <div style="display: flex">
          <div class="line_g_a">客户权限</div>
          <div class="siteAll_h6">
            <el-checkbox-group
              v-model="state.customtype"
              fill="#409eff"
              @change="getcustomName"
            >
              <el-checkbox
                v-for="(item, index) in state.usersName"
                :key="index"
                :label="item"
                name="customtype"
              />
            </el-checkbox-group>
          </div>
        </div>
        <div class="dialog-footer">
          <el-button size="small" @click="closePowerModel"> 取消 </el-button>
          <el-button type="primary" size="small" @click="submitFromPower">
            确认
          </el-button>
        </div>
      </el-scrollbar>
        <!-- 结束 -->
  </el-dialog>
  </div>
</template>

<script setup>
import { toRefs, reactive, computed, onMounted, ref } from "vue";
import { ArrowDown, Plus } from "@element-plus/icons-vue";
import http from "../libs/http";
var newworkList = []

const state = reactive({
  value: "",
  options: [
    {
      value: "展具物流到货",
      label: "展具物流到货",
    },
    {
      value: "卸货说明",
      label: "卸货说明",
    },
    {
      value: "立柱到位立正",
      label: "立柱到位立正",
    },
  ],
  valueTwo: "",
  optionsTwo: [
    {
      value: "B级",
      label: "B级",
    },
    {
      value: "C级",
      label: "C级",
    },
    {
      value: "E级",
      label: "E级",
    },
  ],
  mouldVal: "",
  mouldArr: [
    {
      value: "模板1",
      label: "模板1",
    },
    {
      value: "模板2",
      label: "模板2",
    },
    {
      value: "模板3",
      label: "模板3",
    },
  ],
  tableData: [],
  showModel: false, //显示编辑弹窗
  dialogImageUrl: "",
  dialogVisible: false,
  picTip:
    "建议宽高比16:9 780*438<尺寸<2560*1440 格式:JPG/JPEG/PNG文件大小≤1000KB",
  worktype: [],
  vestVal: [],
  // 路线所有工作流数组, 这个要动态获取显示
  workLineList: [],
  workIdList: [],

  //选择用户权限管理-普通-审核-客户的数据
  showPowerModel: false,    //显示用户权限编辑框
  userList: "",  //用户列表
  usersName: [],  //用户
  userUid: [],
  new_nameUid: [],
  userTotal: "", //用户列表总条数
  userTotal_page: "", //用户列表总页数


  lid_s: '',    //控制账号权限的目标id
  managetype: [], //管理
  manage_id: '',
  ordinarytype: [], //普通
  ordinary_id: '',
  auditingtype: [], //审核
  auditing_id: '',
  customtype: [],   //客户
  customt_id: '',

  //需要提交的表单数据
  Lid: "",
  inputVal: "",
  siteVest: [],
  uploadImg: [],
  uploadImgList: [],
  radioState: "启用",
  siteLineStr: "",
});

// 初始化获取工作流列表
// 数据初始化
onMounted(() => {
  getWorkitemsList();
  setTimeout(() => {
    getWorkLine();
  }, 700)

  getUserList()
});

// 权限人员选择----开始-----

// 获取权限人员名字和uid序号
const getUserList = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
  };
  const res = await http.$get("/apies/backend/getRuleUserList", param);
  if (res.code == 200) {
    let new_userName = [];
    let new_userUid = [];
    let nameUid = [];
    // 有分页数据,要追加数据
    state.userList = res.data;
    res.data.map((i) => {
      new_userName.push(i.name);
      new_userUid.push(i.uid);
      nameUid.push({
        id: i.uid,
        name: i.name,
      });
    });
    state.usersName = new_userName;
    state.userUid = new_userUid;
    state.new_nameUid = nameUid;
  } else {
    console.log(">>>>获取用户列表失败");
  }
};

// 普通
const getordinaryName = (e) => {
  // console.log('>>>>>>>>>>>>选中管理人员', e, '>>>>>>>>>',JSON.parse(JSON.stringify(state.new_nameUid)))
  let strType_a = [];
  JSON.parse(JSON.stringify(state.new_nameUid)).map((i, j) => {
    e.map((j) => {
      if (j == i.name) {
        strType_a.push(i.id + "");
      }
    });
  });
  console.log(strType_a.join(","),'>>>>>>>>>>选中项');
  state.ordinary_id = strType_a.join(",")
};
// 项目简介审核
const getmanageName = (e) => {
  // console.log('>>>>>>>>>>>>选中管理人员', e, '>>>>>>>>>',JSON.parse(JSON.stringify(state.new_nameUid)))
  let strType = [];
  JSON.parse(JSON.stringify(state.new_nameUid)).map((i, j) => {
    e.map((j) => {
      if (j == i.name) {
        strType.push(i.id + "");
      }
    });
  });
  console.log(strType.join(","),'>>>>>>>>>>选中项');
  state.manage_id = strType.join(",")
};
// 工作流审核
const getAuditingName = (e) => {
  console.log('>>>>>>>>>>>>选中管理人员', e, '>>>>>>>>>',JSON.parse(JSON.stringify(state.new_nameUid)))
  let strType_b = [];
  JSON.parse(JSON.stringify(state.new_nameUid)).map((i, j) => {
    e.map((j) => {
      if (j == i.name) {
        strType_b.push(i.id + "");
      }
    });
  });
  console.log(strType_b.join(","),'>>>>>>>>>>选中项');
  state.auditing_id = strType_b.join(",")
}
// 客户
const getcustomName = (e) => {
  let strType_c = [];
  JSON.parse(JSON.stringify(state.new_nameUid)).map((i, j) => {
    e.map((j) => {
      if (j == i.name) {
        strType_c.push(i.id + "");
      }
    });
  });
  console.log(strType_c.join(","),'>>>>>>>>>>选中项');
  state.customt_id = strType_c.join(",")
}

// 新的管理权限表单逻辑
// 编辑
const handlePowerEdit = async (index, row) => {
  console.log('>>>>>>>>>>>>>>>>权限管理逻辑', row)
  let rowList = JSON.parse(JSON.stringify(row))
  state.lid_s = rowList.Lid
  let param = {
    openid: localStorage.getItem("openid"),
    tid: rowList.Lid
  }
  const res = await http.$get("/apies/backend/getSiteTypeUserRuleList", param);
  if(res.code == 200) {
    // 这里是做回显数据用的
    let isPowerList = res.data.list
    let newLine_user = []; // 普通用户
    let newLine_check_project = []; // 项目简介审核
    let newLine_check = []; //工作流审查
    let newLine_customer = [];  //客户权限
    isPowerList.user.map((i, k) => {
      state.userUid.map((j, y)=> {
        if (Number(i) == j) {
          state.usersName.map((n, g) => {
            if (g == y) {
              newLine_user.push(n);
            }
          })
        }
      })
    })
    isPowerList.check_project.map((i, k) => {
      state.userUid.map((j, y)=> {
        if (Number(i) == j) {
          state.usersName.map((n, g) => {
            if (g == y) {
              newLine_check_project.push(n);
            }
          })
        }
      })
    })
    isPowerList.check.map((i, k) => {
      state.userUid.map((j, y)=> {
        if (Number(i) == j) {
          state.usersName.map((n, g) => {
            if (g == y) {
              newLine_check.push(n);
            }
          })
        }
      })
    })
    isPowerList.customer.map((i, k) => {
      state.userUid.map((j, y)=> {
        if (Number(i) == j) {
          state.usersName.map((n, g) => {
            if (g == y) {
              newLine_customer.push(n);
            }
          })
        }
      })
    })
    console.log('++++普通权限',newLine_user,'++++审核',newLine_check_project,newLine_check,'>>>>客户',newLine_customer,'拿到当前权限数据>>>>>>>>>>>>>>>>>>>>>>',isPowerList)
    console.log('>>>>>>>>数组转字符串',isPowerList.user.join(','))
    state.ordinarytype = newLine_user, //普通
    state.ordinary_id = isPowerList.user.join(','),
    state.managetype= newLine_check_project, //项目简介审核
    state.manage_id = isPowerList.check_project.join(','),
    state.auditingtype = newLine_check, //审核
    state.auditing_id = isPowerList.check.join(','),
    state.customtype = newLine_customer,   //客户
    state.customt_id = isPowerList.customer.join(','),

    state.showPowerModel = true
  } else {
    console.log('>>>>>>>>>>>>>列表数据请求失败')
  }
}
// 取消
const closePowerModel = () => {
  console.log('>>>>>>>>>>>关闭表单了')
  state.showPowerModel = false
}
// 提交
const submitFromPower = async () => {
  let params = {
    openid: localStorage.getItem("openid"),
    tid: state.lid_s,
    user_list: state.ordinary_id,
    check_project_list: state.manage_id,
    check_list: state.auditing_id,
    customer_list: state.customt_id
  }
  console.log('>>>>>>>>>>>>>>>数据准备提交了,提交的数据', params)
  const res = await http.$post("/apies/backend/saveSiteTypeUserRuleList", params);
  if (res.code == 200) {
    ElMessage({
          message: "编辑成功！",
          type: "success",
        })
    state.showPowerModel = false
  } else {
    ElMessage('编辑失败！')
  }
}

// --------结束-----------

// 获取工作流列表
const getWorkitemsList = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
  };
  const res = await http.$get("/apies/backend/getWorkitemsList", param);
  if (res.code == 200) {
    let workList = res.data
    let widList = []
    workList.map(i => {
      newworkList.push(i.name)
      widList.push(i.wid)
    })
    console.log(newworkList,'>>>>>>>>>>>>站点分级拿到工作流')
    console.log(widList,'>>>>>>>>>>>>拿到站点ID工作流工作流啦啦啦啦啦啦啦')
    state.workLineList = newworkList
    state.workIdList = widList
  }
}


const getWorkLine = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
  };
  const res = await http.$get("/apies/backend/getLineList", param);
  if (res.code == 200) {
    let newWorkLine = [];
    let workLine = res.data.list;
    console.log(workLine, ">>>>>>>路线工作流数组");
    workLine.map((i) => {
      // 工作流设置的要转多一步
      // console.log(i.workitems.split(","), ">>>>>>>路线工作流数组");
      console.log(state.workLineList,'>>>>>>>>>>>>站点分级拿到工作流')
      console.log(state.workIdList,'>>>>>>>>>>>>站点分级拿到工作流所有工作流的ID')
      let workLineList_b = JSON.parse(JSON.stringify(state.workLineList))
      let workIdList_b = JSON.parse(JSON.stringify(state.workIdList))

      let newLine = [];
      let getAllIdx = []
      workIdList_b.map((m, n) => {
        i.workitems.split(",").map((h, g) => {
          if (m == h) {
            getAllIdx.push(n)
          }
        })
      })
      console.log('>>>>>>>>>>当前选择项的下标', getAllIdx)
      workLineList_b.map((f, y) => {
        getAllIdx.map((i, k) => {
          if (y == i) {
            newLine.push(f);
          }
        })
      })
      console.log(newLine,'>>>>>>>>>>>>>>>>');

      // 渲染表格的数据
      newWorkLine.push({
        Lid: i.id,
        flowTitle: i.name,
        siteNum: i.total_site,
        model: newLine,
        lineStatus: i.status == 1 ? "启用" : i.status == 0 ? "停用" : "未提交",
        logoImg: i.logo_thumb,
        srcList: [i.logo],
        workitem: i.workitems
      });
    });
    state.tableData = newWorkLine;
  } else {
    console.log(">>>>数据列表获取失败！！！");
  }
};

// 显示图表逻辑
const search = ref("");
const filterTableData = computed(() =>
  state.tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
// 编辑
const handleEdit = (index, row) => {
  state.showModel = true;
  // clearAllDate_a();

  let newRow = JSON.parse(JSON.stringify(row));
  state.Lid = newRow.Lid;
  console.log("拿到选中项的所有参数了", newRow);
  state.inputVal = newRow.flowTitle
  state.siteVest = newRow.model
  state.radioState = newRow.lineStatus

  // 回显已上传的图片
  state.uploadImgList = [{
    name: 'about.jpg',
    url: newRow.srcList
  }]
  //回复原先的数据
  state.uploadImg = [newRow.srcList[0]];

  // 编辑初始化要有工作流的值
  state.siteLineStr = newRow.workitem
};
// 删除
const handleDelete = (index, row) => {
  console.log(index, row);
};

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val, ">>>>>>>>>>>所有选中项");
};

// 分页显示逻辑
const currentPage4 = ref(4);
const pageSize4 = ref(5);
const small = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};

//查询列表项
const checkSitelist = () => {
  console.log(">>>>查询");
};
// 清除列表项
const clearSiteItem = () => {
  console.log(">>>>清除");
};
// 增加列表项
const addSiteItem = () => {
  console.log(">>>>增加");
  state.Lid = "";
  state.showModel = true;
  clearAllDate_a();
};
// 关闭表单
const closeModel = () => {
  state.showModel = false;
};

// ---------上传图片开始------------

// 图片上传前进行格式和大小校验
const beforeUpload = (file, uploadFile) => {
  console.log(">>>>>>>上传的图片数组", uploadFile);
  // 获取文件对象
  let isJPG;
  //判断图片类型
  if (
    file.type == "image/jpeg" ||
    file.type == "image/png" ||
    file.type == "image/JPG"
  ) {
    isJPG = true;
  } else {
    isJPG = false;
  }
  // 判断图片大小
  const isLt7M = file.size / 1024 / 1024 < 4; //上传文件小于4MB
  if (!isJPG) {
    ElMessage.error("图片建议是 JPG/PNG/JPEG 格式!");
    uploadFile.splice(uploadFile.indexOf(file), 1);
    return false;
  }
  if (!isLt7M) {
    ElMessage.error("图片大小不能超过 4MB!");
    uploadFile.splice(uploadFile.indexOf(file), 1);
    console.log(uploadFile, ">>>>>>>");
    return false;
  }
};

// 自定义上传图片逻辑
const selfUploadPic = (options) => {
  state.uploadImg = []
  let file = options.file;
  if (beforeUpload(file, state.uploadImgList) == undefined) {
    //图片文件转base64
    getBase64(file).then(async (res) => {
      //  console.log(JSON.parse(JSON.stringify(res)), ">>>>>>>>拿到图片base64图片格式了");
      //请求接口数据
      let newImgArr = [];
      const param = {
        openid: localStorage.getItem("openid"),
        img: JSON.parse(JSON.stringify(res)),
      };
      const resImg = await http.$post("/apies/uploadImage", param);
      if (resImg.code == 200) {
        console.log(resImg.data, ">>>>>>>>>>>>>>>>上传成功了");
        newImgArr.push(resImg.data.img);
        ElMessage({
          message: "图片上传成功！",
          type: "success",
        });
        state.uploadImg = newImgArr;
      } else {
        ElMessage.error("上传失败请重新上传!");
      }
    });
  } else {
    console.log(">>>>>>>>>>>图片格式不正确");
  }
};

// 上传文件超出限制个数
const handleExceed = () => {
  ElMessage.error("已超过上传最大张数");
};

// 上传图片逻辑
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles, ">>>>>>>>>>>>删除图片了了了了");
  state.uploadImg = []
};

const handlePictureCardPreview = (uploadFile) => {
  console.log(">>>>>>>>预览显示的图片", uploadFile.url);
  state.dialogImageUrl = uploadFile.url;
  state.dialogVisible = true;
};

// 图片文件转base64
const getBase64 = (file) => {
  // 直接将处理结果返回
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let fileResult = "";
    reader.readAsDataURL(file);
    reader.onload = () => {
      fileResult = reader.result.toString();
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.onloadend = () => {
      resolve(fileResult);
    };
  });
};

// ------------结束-----------

// 获取选择工作流项
const getworkLineItem = (e) => {
  console.log("拿到选择的所有工作流了", e);
  let newWorkLine = [];
  state.workLineList.map((i, k) => {
    e.map((j, y) => {
      if (i == j) {
        newWorkLine.push(state.workIdList[k]);
      }
    });
  });
  console.log(
    newWorkLine.join(","),
    ">>>>>>>>>>>>>>>>>>>>拿到所有工作流下标了"
  );
  state.siteLineStr = newWorkLine.join(",");
};

// 清空表单所有数据
const clearAllDate_a = () => {
  state.inputVal = ""
  state.siteVest = []
  state.uploadImgList = []
  state.uploadImg = []
  state.radioState = "启用"
  state.siteLineStr = ""
};

// 非空判断，表单是不是有没有填的
const isKong = () => {
  // if (state.inputVal == "" || state.siteVest.length == 0 || state.uploadImgList.length == 0) {
  if (state.inputVal == "" || state.uploadImgList.length == 0) {
    return false;
  } else {
    return true;
  }
};

// 提交表单数据按钮
const submitFrom = async () => {
  if (isKong()) {
    if (state.uploadImg.length == 0) {
      ElMessage({
        message: "图片正在上传中，请稍等...",
        type: "warning",
      });
      return;
    }
    let Lid = state.Lid == "" ? 0 : state.Lid;
    let param = {
      openid: localStorage.getItem("openid"),
      name: state.inputVal,
      logo: state.uploadImg[0],
      workitems: state.siteLineStr,
      status:
        state.radioState == "启用" ? 1 : state.radioState == "停用" ? 0 : "",
      tid: Lid,
    };
    console.log(">>>>>>>>>>需要提交的所有数据", param);
    const res = await http.$post("/apies/backend/editSitetype", param);
    if (res.code == 200) {
      getWorkLine();
      state.showModel = false;
      state.Lid == "" ? ElMessage({
        message: '创建成功',
        type: 'success',
      }) : ElMessage({
        message: '编辑成功',
        type: 'success', 
      })
    } else {
       state.Lid == "" ? ElMessage('创建失败！') : ElMessage('编辑失败！')
       state.showModel = false;
    }
  } else {
    ElMessage('填空项不能为空!')
  }
};
</script>

<style scoped>
.Title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}
::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}
::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}
::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}
/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}
::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}
::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

/* 修改分页的背景颜色 */
::v-deep(
    .el-pagination.is-background .el-pager li:not(.is-disabled).is-active
  ) {
  background-color: #409eff !important;
}
.line_a {
  flex: 2;
  line-height: 22px;
  text-align: center;
  width: 78px;
  font-weight: 600;
}
.line_b {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 5px;
  margin-right: 17px;
}
.line_c {
  margin: 20px 14px 23px 7px;
  font-weight: 600;
  width: 90px;
  text-align: end;
  display: flex;
}

/* ::v-deep .el-icon svg {
  height: 2em !important;
  width: 1em;
} */
.line_g {
  flex: 1;
  line-height: 20px;
  text-align: center;
  font-weight: 600;
}
.line_g_a {
  flex: 2;
  line-height: 37px;
  text-align: right;
  font-weight: 600;
  padding-right: 5px;
}
.line_f {
  flex: 8;
  background-color: #e8e8e8;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}

.siteAll_h7 {
  line-height: 38px;
  text-align: center;
  font-weight: 600;
  margin-left: 27px;
  margin-right: 7px;
}
.siteAll_h6 {
  flex: 8;
  background-color: #e8e8e8;
  padding-left: 8px;
  /* padding-top: 3px; */
  border-radius: 3px;
  box-sizing: border-box;
  margin-top: 5px;
}
.dialog-footer_a {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
